<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=no">
	<meta name="format-detection" content="telphone=no, email=no"/>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<title>环保数据管家</title>
	<link rel="stylesheet" type="text/css" href="assets/css/reset.css">
	<link rel="stylesheet" type="text/css" href="assets/css/iconfont/iconfont.css">
	<link rel="stylesheet" type="text/css" href="assets/css/app.css">
	<link rel="stylesheet" type="text/css" href="assets/css/area.css">
	<style type="text/css">
	.iconfont {padding-right:0.5rem;}
	.area-list .hd {background: #22ad3a;}
	.aqi-data {position:absolute;right:1.2rem;top:0.4rem;}
	.aqi-data i{font-style:normal;font-size:0.6rem;padding:0 0.25rem;}
	</style>
	<script type="text/javascript">
		/**
   * 对Date的扩展，将 Date 转化为指定格式的String
   * 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q) 可以用 1-2 个占位符
   * 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
   * eg:
   * (new Date()).pattern("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
   * (new Date()).pattern("yyyy-MM-dd E HH:mm:ss") ==> 2009-03-10 二 20:09:04
   * (new Date()).pattern("yyyy-MM-dd EE hh:mm:ss") ==> 2009-03-10 周二 08:09:04
   * (new Date()).pattern("yyyy-MM-dd EEE hh:mm:ss") ==> 2009-03-10 星期二 08:09:04
   * (new Date()).pattern("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
   */
  Date.prototype.pattern = function(fmt) {
    var o = {
      "M+": this.getMonth() + 1, //月份
      "d+": this.getDate(), //日
      "h+": this.getHours() % 12 == 0 ? 12 : this.getHours() % 12, //小时
      "H+": this.getHours(), //小时
      "m+": this.getMinutes(), //分
      "s+": this.getSeconds(), //秒
      "q+": Math.floor((this.getMonth() + 3) / 3), //季度
      "S": this.getMilliseconds() //毫秒
    };
    var week = {
      "0": "\u65e5",
      "1": "\u4e00",
      "2": "\u4e8c",
      "3": "\u4e09",
      "4": "\u56db",
      "5": "\u4e94",
      "6": "\u516d"
    };
    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    if (/(E+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "星期" : "") : "") + week[this.getDay() + ""]);
    }
    for (var k in o) {
      if (new RegExp("(" + k + ")").test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
      }
    }
    return fmt;
  }
	</script>
</head>
<body>
	<header>
		<span class="title">各监测点月度空气质量监测情况</span>
	</header>
	
	<div class="middle-content">
	    <div class="areaWrap">
		    <div class="area-title flex-row">
			    注：“*”为空气自动监测国控点。  
			</div>
			<div class="area-list">
			</div>
		</div>	
	</div>
	
	<div style="height: 2.2rem;"></div>
	<footer class="flex-row">
		<span id="app-main-link" class="flex-row-item active"><i class="iconfont icon-weather"></i> 空气质量监测</span>
		<span id="app-middle-link" class="flex-row-item"><i class="iconfont icon-liuliangxinxishangbao" style="font-size:14px;line-height:16px;"></i> 空气质量分析</span>
		<span id="app-map-link" class="flex-row-item"><i class="iconfont icon-iconfontweizhi"></i> 目标考核</span>
		
	</footer>
</body>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/touch.min.js"></script>
<script src="assets/js/highstock.js"></script>
<script>
    var RequestUrl='.';
    var dataUrl = RequestUrl+"/data?act=aqiarean";
	var dictArea = [2001,2002,2003,2004,2006,2007,2008,2009,2010,2013,2016,2022,2024];
	var bgColor;
	
	getJSONData(dataUrl,AllAreaCallback);
	
    function AllAreaCallback(json){
        var htmlArea = '';
		
        // 循环各监控点		
		var cityData=json.Data;
		var cityArr=[];
		var numArr=[]
		    for(var i=0;i<dictArea.length;i++){
			    for(x in cityData){
				    if(x == dictArea[i]){
				        cityArr.push(cityData[x]);
					    numArr.push(x);
				    }
			    }
			}

        makeHtml(cityArr,numArr);
		
		$('.area-item').each(function(i) {
            AQIChange(RequestUrl+'/data?act=aqiarea&areacode='+numArr[i],'#highcharts-m'+i);
        });		
        // 头部背景颜色
        $(".area-item .hd").each(function(){
		      var _val = $(this).attr('data-bgColor');
			  bgColor = changecolor(_val);
              $(this).css('background-color',bgColor);
        });
    }
	//生成html
	function makeHtml(arr,arr2){
	    var html='';
	    arr.forEach(function(e,i){
			html += '<div class="aqiArea area-item">'
			     + '<div class="hd" data-bgColor="'+e.aqi+'">'
				 + '<i class="iconfont icon-yuanchengkongzhi"></i>'
				 + e.name +'*'
				 + '<div class="aqi-data"><i>AQI</i>'+e.aqi+'/<i>PM25</i>'+e.pm25+'</div>'
				 + '</div>'
				 + '<div class="bd" id="highcharts-m'+i+'"></div>'
				 + '</div>';
		});
		
		$('.area-list').html(html);
		
	}
	
	//通用方法
	function getJSONData(url,callback){
      $.ajax({
          type: "get",
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          url: url,  //这里是网址
          success: function (json) {
              callback(json)
          },
          timeout: 90*1000,
          error: function (XMLHttpRequest, textStatus, errorThrown) {
              console.error(url,textStatus+": "+errorThrown);
          }
      });
    }	
	
	function AQIChange(url,id){
	getJSONData(url,function(data){
		if(data.Error==null){
			var time=[],aqi=[],pm=[];
			var haqi=data.Data.reverse();
			var aqi2,pm25;

			haqi.forEach(function(e,i){
			    aqi2=parseFloat(e.aqi);
				pm25=parseFloat(e.pm25);
				var aqiitem={
					color: num2color(aqi2),
					y: aqi2
				}				
				var pmitem={
					color: num2color(pm25),
					y: pm25
				}				
				time.push(e.date);
				aqi.push(aqi2);
				pm.push(pmitem);
			});
			    AQIChart(id,time,aqi,pm);
		}
	});	
	}	
	
	// 生成折线图
	function AQIChart(id,time,aqi,pm){
		$(id).highcharts({
    		credits:{
    			enabled:false
    		},
        title: {
            text: '',
            x: -20 //center
        },
        subtitle: {
            text: '指数',
			align: 'left'
        },
        xAxis: {
            categories: time,
            gridLineColor:'#EEEEEE',
            gridLineWidth: 1,
            tickLength:3,
            labels:{
            	enabled:true,
            	style:{
            		color: '#A7A7A7',
								fontWeight: 'normal',
								fontSize:'8px'
            	}
            }
        },
        yAxis: {
            title: {
                text: ''
            },
            gridLineWidth: 0,
            labels:{
            	style:{
            		color: '#B7B7B7',
								fontWeight: 'normal',
								fontSize:'8px'
            	}
            }
        },
        tooltip: {
            // valueSuffix: 'ug/m³'
            formatter:function(){
            	var suffix='',name=this.series.name;
            	return '<small>'+this.x+'</small><br/>'+name+': '+this.y+suffix;
            }
        },
        legend: {
            layout: 'horizontal',
            align: 'right',
            verticalAlign: 'top',
            borderWidth: 0,
            lineHeight:12,
            margin:0,
            padding:0,
            itemMarginBottom:8,
            itemStyle:{
            	fontWeight:"normal",
            	fontSize:'8px'
            }
        },
        plotOptions: {
            series: {
                marker: {
                    fillColor: null,
                    lineWidth: 1,
                    radius: 3.5,
                    lineColor: null // inherit from series
                    ,states:{
                    	hover:{
                    		enabled:true,
                    		fillColor: null,
                    		lineColor: null
                    	},
                    	select:{
                    		enabled:true,
                    		fillColor: null,
                    		lineColor: null
                    	}
                    }
                }
            }
        },
        series: [{
            name: 'AQI',
            data: aqi,
            color:'#FE9A01'
        },{
            name: 'PM2.5',
            data: pm,
            color:'#00E3D8'
        }]
    });
	}
	
	function num2color(num){
		var num=parseInt(num);
		var color='#23C700';
		if(num<50){
			color='#23C700';
		}else if(50<num&&num<=100){
			color='#ECD814';
		}else if(100<num&&num<=150){
			color='#FF9D01';
		}else if(150<num&&num<=200){
			color='#F83702';
		}else if(200<num&&num<=300){
			color='#CD162E';
		}else if(num>300){
			color='#8E0C30';
		}
		return color
	}	

	function changecolor(num){
		var num=parseInt(num);
		var color='#1fbc39';
		if(num<50){
			color='#1fbc39';
		}else if(50<num&&num<=80){
			color='#d2c01e';
		}else if(num>100){
			color='#ff9a02';
		}
		return color
	}		
</script>
<script>
	var CACHE={
		njaqi:'-'
	};
	touch.on('#app-back', 'tap', function(ev){
	  //exit app
	});
	touch.on('#app-main-link', 'tap', function(ev){
	  location.href='index.html';
	});
	touch.on('#app-middle-link', 'tap', function(ev){
	  location.href='air-quality.html';
	});
	touch.on('#app-map-link', 'tap', function(ev){
	  location.href='map.html';
	});
	touch.on('#app-order-link-js', 'tap', function(ev){
	  location.href='order.html#js';
	});
	touch.on('#app-order-link-csj', 'tap', function(ev){
	  location.href='order.html#csj';
	});
</script>
<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan style='display:none;' id='cnzz_stat_icon_1259663969'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s4.cnzz.com/z_stat.php%3Fid%3D1259663969' type='text/javascript'%3E%3C/script%3E"));</script>
</html>